<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17-beta.0/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
    <style>
    input{
        width:250px;
        height:30px;
        border-radius: 6px;
        border:1px solid #aaa;
    }
    </style>
</head>
<body>
    <div id="test">
       <input type="text" @keyup.enter="submit">
       <h2>{{title}}</h2>
       <img v-bind:src="url" alt="">
       <p>{{author_intro}}</p>
    </div>
    <script>
     new Vue({
         el:"#test",
         data:{
             title:"三体",
             url:"https://img1.doubanio.com/view/subject/s/public/s2768378.jpg",
             author_intro:"刘慈欣，祖籍河南，长于山西，中国科普作家协会会员，山西省作家协会会员，高级工程师。 自1999年处女作《鲸歌》问世以来，刘慈欣已发表短篇科幻小说三十余篇、出版长篇科幻小说六部，并创下连续八年荣获中国科幻最高奖“银河奖”的纪录。他的长篇作品《三体》开创《科幻世界》月刊连载原创作品的先例，成为2006年度最受关注、最畅销的科幻小说。",
         },
         methods:{
             submit(event){
                 var self=this;
                 let value=event.target.value;
                 let url=`https://douban.uieee.com/v2/book/search?q=${value}&count=1`;
                 $.ajax({
                     url,
                     type:"get",
                     dataType:"jsonp",
                     success(res){
                        self.handleData(res);
                     }
                 })
             },
             handleData(res){
                 let title=res.books[0].title;
                 let url=res.books[0].images.small;
                 let author_intro=res.books[0].author_intro;
                 this.title=title;
                 this.url=url;
                 this.author_intro=author_intro;
             }
         }
     })
    </script>
</body>
</html>